<script name="livinghome" setup>
import { ref, onActivated, computed, watchEffect } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import MyCard from '@/constants/modules/my-card/index.vue';

const store = useStore();
const route = useRoute();

// onActivated(() => {
store.dispatch('homepage/updateBanner');
// });

watchEffect(() => {
  store.dispatch('liviinghome/updateLivingHome', route.params.id);
});

// 轮播图
const bannerList = computed(() => store.state.homepage.bannerList);
// 二级分类数据
const liviingHome = computed(() => store.state.liviinghome.liviinghomeList);


</script>

<template>
  <div class="main">
    <div class="crumbs">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ liviingHome.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="carousel">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <a :href="item.hrefUrl"><img :src="item.imgUrl"/></a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 全部分类 -->
    <div class="card">
      <my-card
        title-height="100"
        card-padding="16px"
        card-height="160"
      >
        <template v-slot:title>
          <h3 class="title">
            - 全部分类 -
          </h3>
        </template>
        <template #card>
          <div
            v-for="item in liviingHome.children"
            :key="item.id"
            class="card-content card-content-hover"
          >
            <div>
              <img :src="item.picture">
            </div>
            <div>{{ item.name }}</div>
          </div>
        </template>
      </my-card>
    </div>
    <!-- 查咖酒具 -->
    <div
      v-for="item in liviingHome.children"
      :key="item.id"
      class="card"
    >
      <my-card
        title-height="100"
        rigth-size="查看更多"
        card-padding="30 50 30 50"
        card-height="260"
        v-if="Object.keys(liviingHome).length >0"
      >
        <template v-slot:title>
          <h3 class="title">
            {{ item.name }}
          </h3>
          <div class="subhead">温柔柔软，品质之选</div>
        </template>
        <template #card>
          <div
            v-for="c in item.goods"
            :key="c.id"
            class="card-content animation"
          >
            <div>
              <img class="img" :src="c.picture">
            </div>
            <div class="sub-name">{{ c.name }}</div>
            <div class="sub-name sub-desc">{{ c.desc }}</div>
            <p>￥{{ c.price }}</p>
          </div>
        </template>
      </my-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  $a: #b28b95;
  .main {
    padding: 0 130px;
    background-color: #f5f5f5;

    // 面包屑
    .crumbs {
      padding: 22px 0;
    }

    // 轮播图
    .carousel {
      // 高度
      :deep(.el-carousel__container) {
        height: 500px;
      }

      :deep(.el-carousel__button) {
        // 画小圆点
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: $a;
        opacity: 0.5;
      }
      // 小圆点定位
      :deep(.el-carousel__indicators--outside) {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 10px;
      }
    }

    // 卡片
    .card {
      margin-top: 18px;

      .title {
        color: #666;
      }

      .subhead {
        color: #999999;
      }

      // 小卡片
      .card-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;

        img {
          margin-top: 12px;
          width: 100px;
          display: block;
          object-fit: cover;
        }

        .img {
          width: 160px;
          display: block;
          object-fit: cover;
        }

        .sub-name {
          padding-top: 8px;
          text-align: center;
          width: 160px;
          color: #333;
          // 文字省略号
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .sub-desc {
          color: #999999;
          font-size: 14px;
        }

        p {
          color: red
        }
      }


      // 小卡片鼠标移入改变颜色
      .card-content-hover {

        &:hover {
          color: $c;
        }
      }

      // 小卡片鼠标移入动画
      .animation {
        transform: translateY(0px);
        box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0);
        transition: all 0.3s linear;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
</style>
